<template>
  <div style="background-color: #ececec; padding: 20px">
    <a-row :gutter="15">
      <a-col>
        <a-card title="设备用电分析" :bordered="false">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="时间类型:">
              <el-select v-model="formInline.datePickerType" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="起始时间:">
              <el-date-picker v-model="formInline.startTime" type="month" placeholder="选择起始时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间:">
              <el-date-picker v-model="formInline.endTime" type="month" placeholder="选择结束时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="部门:">
              <el-select v-model="formInline.dept" placeholder="选择部门" @change="deptChange">
                <el-option v-for="item in this.dept"
                        :key="item.value"
                        :label="item.label"
                        :value="item.departName">{{ item.departName }}
                      </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="设备:">
              <el-select v-model="formInline.device" placeholder="选择设备">
                <el-option v-for="item in this.device"
                        :key="item.value"
                        :label="item.code"
                        :value="item.code">{{ item.code }}
                      </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="16" :style="{ marginTop: '16px' }">
      <a-col :span="24">
        <a-card title="总电费(元)"   :bordered="false">
          <p>54,308.62</p>
          <span>总电量 77,584 kwh </span>
        </a-card>
      </a-col>
    </a-row>
    <br>

    <template>
      <a-card style="width: 100%">
        <div style="width:100%; height:330px;">
          <div id="main" ref="e4" class="five"></div>
        </div>
      </a-card>
    </template>

  </div>

</template>

<script>
import { httpAction, getAction, postAction } from '@/api/manage'
import * as echarts from 'echarts';

  export default {
    data () {
      return {
        options: [{value: 'month', label: '月'}, {value: 'date', label: '天'}, {value: 'datetime', label: '时'}],
        chart: null,
        dept: [],
        device: [],
        formInline: {
          startTime: '',
          endTime: '',
          dept: '',
          device: '',
          datePickerType: 'month',
        },
        url: {
          getDept: '/sys/sysDepart/list',
          getStatistics:'/consumptionElectricity/consumptionElectricity/select',
          getCoefficient:'/emissionCarbon/emissionCarbon/getCoefficient',
          getOutput: '/output/output/getByDept',
          getDevice:'/device/device/getByDept',
        },
      }
    },
    methods: {
      deptChange(e){
        this.divice = [];
        getAction(this.url.getDevice+'?dept='+e).then((res)=>{
          this.device = res.result;
        })
      },
      loadEmission(){
        // 电能月度CO2排放 =(月度用电量kw / 1000) MW × 电能CO2排放系数
        var endDate = new Date();
        var startDate = (endDate.getFullYear()-1)+"/"+(endDate.getMonth()+1);
        let data1 = [];
        let data2 = [];
        this.formInline.startTime = new Date(Date.parse(startDate));
        this.formInline.endTime = endDate;
        postAction(this.url.getStatistics,this.formInline).then((res)=>{
          console.log(res);
          res.result.forEach(item=>{
            data1.push(item.year+'-'+item.month);
            data2.push(item.consumption);
          })
          this.data1 = data1;
          this.data2 = data2;
        })
      },
      onSubmit() {
        let data1 = [];
        let data2 = [];
        if('month' == this.formInline.datePickerType){
          let endTime = new Date(this.formInline.endTime);
          let year = endTime.getFullYear();
          let month = endTime.getMonth()+1;
          let lastDate = new Date(year, month , 0).getDate();
          month = month < 10 ? '0' + month : month ;
          endTime = [year,month ,lastDate ].join("-")+" 23:59:59";
          this.formInline.endTime = new Date(endTime);
        }
        postAction(this.url.getStatistics,this.formInline).then((res)=>{
          if(res.success){
            console.log(res);
            res.result.forEach(item=>{
              if('date' == this.formInline.datePickerType){
                data1.push(item.year+'-'+item.month+'-'+item.day);
              }else if('datetime' == this.formInline.datePickerType){
                data1.push(item.year+'-'+item.month+'-'+item.day+' '+item.hour+'时');
              }else{
                data1.push(item.year+'-'+item.month);
              }
              data2.push(item.consumption);
            })
            this.data1 = data1;
            this.data2 = data2;
          }
        })
        setTimeout(() => {
          this.getzhu()
        }, 500)
      },
      handleChange1(){
        this.dept = []
        getAction(this.url.getDept).then((res)=>{
          this.dept = res.result;
          console.log(this.dept);
        })
      },
      getzhu(){
        if(this.chart != null && this.chart != '' && this.chart != undefined){
          this.chart.dispose();
        }
        var chartDom = document.getElementById('main');
        this.chart = echarts.init(chartDom);
        var option;
        option = {
          title: {
            text: '用电分析'
          },
          tooltip: {trigger: 'axis'},
          legend: {
            data: ['用电量']
          },
          toolbox: {
            feature: {
              dataView: {
                show: true,
                readOnly: false
              },
              magicType: {
                show: true,
                type: ['line', 'bar']
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            },
            padding: [0,15,0,0]
          },
          xAxis: {
            type: 'category',
            data: this.data1,
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '用电量',
              data: this.data2,
              type: 'line',
              smooth: true,
            }
          ],
        };
        option && this.chart.setOption(option,true);
      },
    },
    created () {
      this.handleChange1();
      setTimeout(() => {
        this.formInline.dept = this.dept[this.dept.length-1].departName;
        this.deptChange(this.formInline.dept);
      }, 400)
      
      setTimeout(() => {
        this.loadEmission();
      }, 700)
    },
    mounted(){
      setTimeout(() => {
        this.getzhu()
      }, 900)
    },
  }
</script>

<style>
 .sousuo{
  font-size: 14px;
  display: inline;
  /* font-weight:bold; */
 }
 .five {
  width: 100%;
  height: 100%;
}
.el-card__body{
    padding-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 30px;
  }
</style>
  
  
  